<template>
    <div class="cinema_body">
				<ul>
					<li v-for="item in cinemalist" :key="item.id">
						<div>
							<span>{{item.nm}}</span>
							<span class="q"><span class="price">{{item.sellPrice==true?item.sellPrice:'22.9'}}</span> 元起</span>
						</div>
						<div class="address">
							<span>{{item.addr}}</span>
							<span>{{item.distance}}</span>
						</div>
						<div class="card">
                			<div v-if="item.tag.sell" class="bl" >改签</div>
							<div v-if="item.tag.allowRefund" class="bl">退订</div>
							<div v-if="item.tag.snack" class="or">小吃</div>
                			<div v-if="item.tag.vipTag" class="or">折扣卡</div>
       					</div>
					</li>
				</ul>
			</div>
</template>

<script>
import {cinemaList}  from '../../api/index'
export default {
    props: {

    },
    data() {
        return {
			cinemalist:[]
        };
    },
    computed: {

    },
    created() {

	},
    async mounted() {
	   let result = await  cinemaList({cityId:10})
	   console.log(result);
	   
	   if (result.msg==='ok') {
		   this.cinemalist = result.data.cinemas
	   }
    },
    watch: {

    },
    methods: {

    },
    components: {

    },
};
</script>

<style scoped >
#content .cinema_body{ flex:1; overflow:auto; margin-top: 96px;}
.cinema_body ul{ padding:20px;}
.cinema_body li{  border-bottom:1px solid #e6e6e6; margin-bottom: 20px;}
.cinema_body div{ margin-bottom: 10px;}
.cinema_body .q{ font-size: 11px; color:#f03d37;}
.cinema_body .price{ font-size: 18px;}
.cinema_body .address{ font-size: 13px; color:#666;}
.cinema_body .address span:nth-of-type(2){ float:right; }
.cinema_body .card{ display: flex;}
.cinema_body .card div{ padding: 0 3px; height: 15px; line-height: 15px; border-radius: 2px;   font-size: 13px; margin-right: 5px;}
.cinema_body .card div.or{ color: #f90; border: 1px solid #f90;}
.cinema_body .card div.bl{ color: #589daf; border: 1px solid #589daf;}
</style>
